<template>
    <div class="main">
        <el-skeleton animated :rows="8" :loading="data.isFisrt">
            <div class="dic_head">
                <div class="dic_add">
                    <el-button type="primary" @click="event.Add">添加</el-button>
                </div>
                <div class="search">
                    <el-input v-model="data.key" style="width: 350px" size="large" placeholder="请输入关键字查询"
                        :suffix-icon="Search" />
                </div>
            </div>
            <div class="pack_main">
                <div class="pack_con suspension" v-for="item in data.data" :key="item.id">
                    <div class="pack_text">
                        <div style="font-size: 18px;color:black;font-weight: 100;">
                            {{item.name}}
                        </div>
                        <div style="margin-top: 4px;">
                            <template v-for="item2 in item.childrenpro " :key="item2">
                                <el-tag   size="small"
                                    style="margin-right: 8px;border-radius: 4px;color: #45494E;">{{ item2 }}</el-tag>
                            </template>
                        </div>
                        <div style="margin-top: 6px;">
                           描述： <el-tag style="font-size: 14px;" type="primary">{{item.explain}}</el-tag>
                        </div>
                        <div style="margin-top: 6px;">
                           服务时长：{{item.duration}} (分钟)
                        </div>
                        <div style="margin-top: 6px;">
                           库存： {{item.stock==0?'不限量':item.stock}}
                        </div>
                        <div style="margin-top: 8px;">
                            惊爆价：<span style="color: red;font-weight: 700;">￥{{ item.total_price }}</span>
                        </div>
                        <!-- <div style="margin-top: 10px;font-size: 12px;color:black;">
                            销量： 2000
                        </div> -->
                        <div style="margin-top: 8px; display: flex; border-top: 1px solid #000; width: 110px;">
                            <div style="margin: 8px;">
                                <el-tooltip class="box-item" effect="dark" content="上/下架" placement="top">
                                <el-switch size="small" @change="event.active(item.id)" v-model="item.isActive" :active-value="1" :inactive-value="0" /> 
                            </el-tooltip>
                            </div>
                            <div style="margin: 8px;">                          
                                <el-tooltip class="box-item" effect="dark" content="详情" placement="top">
                                    <el-button type="primary" :icon="Edit" circle size="small" @click="event.detail(item.id)"/>
                                </el-tooltip>                             
                            </div>                  
                        </div>
                    </div>
                    <div class="pack_img">
                        <el-carousel :interval="5000" arrow="always">
                            <el-carousel-item v-for="img in item.pimgs" :key="img" style="height: 200px;border-radius: 8px;">
                              <img  :src= "'http://localhost:5220/images/'+img" style="width: 100%; height: 100%;"/>
                            </el-carousel-item>
                        </el-carousel>
                    </div>


                </div>

            </div>
        </el-skeleton>
    </div>
</template>

<script setup lang="ts">
import type package_Dto from '@/Dto/Request/product/package';
import { reactive, watchEffect } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { Get_All_Package, isActive_Package } from '@/api/product/package';
import Api_Code from '@/Dto/Response/Api_code';
import router from '@/router';
import { msg } from '@/utils/msg';
import {Edit} from '@element-plus/icons-vue'
import { closeloading, startloading } from '@/utils/loading';

const data = reactive<package_Dto>({
    key: '',
    isFisrt: false,
    data: [],
    request:{
        value:'',
        pimgs:[]
    },
    pages: {
        page: 1,
        limit: 10,
        total: 0
    }
})

const event = {
    detail(id:string){
        router.push('/product/packdetail/'+id)
    },
    Add() {
        router.push('/product/addpackage')
    },
   async active(id:string){
    startloading()
        const res=await isActive_Package({
            id:id
        })
        if(res.code===Api_Code.ok){
            methods.bind()
            closeloading()
            msg(res)
        }else{
            msg(res)
        }
    }

}

const methods = {
    async bind() {
        startloading()
        const res = await Get_All_Package({
            page: data.pages?.page || 1,
            limit: data.pages?.limit || 10,
            key: data.key || ""
        })

        if (res.code === Api_Code.ok) {
            data.isFisrt = false
            data.data = res.data.data   
            data.pages!.total = res.data.total
            closeloading()
        console.log(data.data,"::::::::::")
        }
    }
}

watchEffect(async()=>{
    await methods.bind()
})
</script>

<style scoped>
el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 100px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.pack_con {
    width: 90%;
    display: flex;
    height: 250px;
    background: #f6f5f5;
    /* background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%); */
    border-radius: 8px;
    padding: 10px;
    margin:10px ;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pack_text {
    flex: 1;
    padding-left:10px ;
}

.pack_img {
    width: 400px;
    height: 300px;
}

.pack_main {
    width: 100%;
    height: calc(100vh - 200px);
    margin: 8px;
    overflow:auto;
}

.main {
    width: 100%;
    height: 100%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 8PX;
    position: absolute;
}

.dic_head {
    margin: 10px;
    height: 60px;
    border: 1px solid #eee;
    border-radius: 8px;
    display: flex;
}

.dic_add {
    padding-left: 20px;
    padding-top: 12px;
    flex: 1;
}

.search {
    flex: 3;
    line-height: 50px;
}
.suspension {
  transition: all 0.3s ease;
}

.suspension:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 14px 24px #0003;
}
</style>